<template>
    <el-container>
        <el-header class="top">
            <div class="box">
                <el-dropdown>
                    <el-button  type="info" color="#ccc">当前用户:{{ store.getters.getUser.username }} </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>个人中心</el-dropdown-item>
                            <el-dropdown-item><b @click="outlogin"> 退出登录</b></el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <h3>Xiao U - Management</h3>
        </el-header>
        <el-container>
            <el-aside width="240px">
                <v-nav></v-nav>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script lang="ts" setup>
import vNav from '@/components/vNav.vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from "element-plus"
import { useStore } from 'vuex';
let store = useStore()
let router = useRouter()
let outlogin = () => {

    ElMessageBox.confirm(
        '是否确认退出登陆？',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            router.push("/login")
            sessionStorage.removeItem("userinfo")
            ElMessage({
                type: 'success',
                message: '退出成功！',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消退出！',
            })
        })
}

</script>
<style lang="less" scoped>
b{
    width: 100%;
    height: 100%;
}
#welcome {
    color: #fff;
    font-size: 22px;
    position: relative;
    top: 18px;
}

.top {
    background-color: #373D41;
    font-size: 25px;
    color: #fff;
    text-align: center;

}

.top h3 {
    line-height: 60px;

}

.top .box {
    float: right;
    margin-top: 10px;
    font-size: 20px;
    margin-right: 20px;

}

.top .box span {
    font-size: 18px;
}

.top .box button {
    margin-top: 5px;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
</style>